<template>
  <div class="workshop-dashboard">
    <!-- 标题栏 -->
    <div class="dashboard-header">
      <h1 class="title">智能车间生产管控大屏</h1>
      <div class="datetime">{{ currentDateTime }}</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-content">
      <!-- 第一行：统计卡片 + 工单进度 -->
      <div class="row row-1">
        <!-- 统计卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon">🏭</div>
            <div class="stat-number">{{ stats.workshops }}</div>
            <div class="stat-label">车间数</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">🏭</div>
            <div class="stat-number">{{ stats.productionLines }}</div>
            <div class="stat-label">产线数</div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">📺</div>
            <div class="stat-number">{{ stats.equipment }}</div>
            <div class="stat-label">设备数</div>
          </div>
        </div>

        <!-- 工单进度表格 -->
        <div class="work-order-table">
          <div class="table-header">
            <h3>工单进度</h3>
          </div>
          <table>
            <thead>
              <tr>
                <th>工单编号</th>
                <th>工单状态</th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>产品数量</th>
                <th>计划数</th>
                <th>实际完成</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="loading" class="loading-row">
                <td colspan="7">正在加载数据...</td>
              </tr>
              <tr v-else-if="error" class="error-row">
                <td colspan="7">{{ error }}</td>
              </tr>
              <tr v-else-if="workOrders.length === 0" class="no-data-row">
                <td colspan="7">暂无工单数据</td>
              </tr>
              <tr v-else v-for="order in workOrders" :key="order.workOrderId || order.id">
                <td>{{ order.workOrderNo || order.orderNumber || '未知' }}</td>
                <td>{{ order.status || '未知' }}</td>
                <td>{{ order.productCode || order.productId || '未知' }}</td>
                <td>{{ order.productName || '未知' }}</td>
                <td>{{ order.productSpec || order.quantity || '未知' }}</td>
                <td>{{ order.planQuantity || order.quantity || 0 }}</td>
                <td>{{ order.actualQuantity || order.completedQuantity || 0 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 第二行：工序进度 + 今日统计 + 产品员工 -->
      <div class="row row-2">
        <!-- 工序进度 -->
        <div class="process-progress">
          <div class="section-header">
            <h3>工序排工排名</h3>
          </div>
          <div class="echarts-container">
            <div ref="processChartRef" class="process-echarts"></div>
          </div>
        </div>

        <!-- 今日统计 -->
        <div class="today-stats">
          <div class="section-header">
            <h3>今日统计</h3>
          </div>
          <div class="hexagon-stats">
            <div class="hexagon-item">
              <div class="hexagon">
                <div class="hexagon-content">
                  <div class="hex-label">计划数量</div>
                  <div class="hex-value">{{ todayStats.planned }}</div>
                </div>
              </div>
            </div>
            <div class="hexagon-item">
              <div class="hexagon">
                <div class="hexagon-content">
                  <div class="hex-label">工单数量</div>
                  <div class="hex-value">{{ todayStats.orders }}</div>
                </div>
              </div>
            </div>
            <div class="hexagon-item">
              <div class="hexagon">
                <div class="hexagon-content">
                  <div class="hex-label">任务数量</div>
                  <div class="hex-value">{{ todayStats.tasks }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 产品员工 -->
        <div class="employee-table">
          <div class="table-header">
            <h3>产品员工</h3>
          </div>
          <table>
            <thead>
              <tr>
                <th>时间</th>
                <th>产品名称</th>
                <th>员工数量</th>
                <th>合格数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="loading" class="loading-row">
                <td colspan="4">正在加载数据...</td>
              </tr>
              <tr v-else-if="error" class="error-row">
                <td colspan="4">{{ error }}</td>
              </tr>
              <tr v-else-if="employees.length === 0" class="no-data-row">
                <td colspan="4">暂无员工数据</td>
              </tr>
              <tr v-else v-for="employee in employees" :key="employee.id || employee.workOrderId">
                <td>{{ formatDateTime(employee.reportTime || employee.startTime || employee.createTime) }}</td>
                <td>{{ employee.productName || employee.processName || '未知' }}</td>
                <td>{{ employee.reportQuantity || employee.employeeId || '未知' }}</td>
                <td>{{ employee.qualifiedQuantity || employee.status || '未知' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 第三行：设备占比 + 产品合格率 -->
      <div class="row row-3">
        <!-- 缺陷占比 -->
        <div class="equipment-ratio">
          <div class="section-header">
            <h3>缺陷占比</h3>
          </div>
          <div class="defect-chart-container">
            <div class="defect-pie-chart">
              <div ref="equipmentChartRef" class="equipment-echarts"></div>
            </div>
            <div class="defect-stats">
              <div v-for="item in defectStats" :key="item.name" class="defect-stat-item">
                <div class="defect-color" :style="{ backgroundColor: item.color }"></div>
                <span class="defect-name">{{ item.name }}: {{ item.count }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 产品合格率 -->
        <div class="quality-chart">
          <div class="section-header">
            <h3>产品合格率</h3>
          </div>
          <div class="echarts-container">
            <div ref="qualityChartRef" class="quality-echarts"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { MES_imesApi } from '@/utils/Interceptors'

// 接口类型定义
interface WorkOrder {
  workOrderId: number
  workOrderNo: string
  status: string
  productCode: string
  productName: string
  productSpec: string
  planQuantity: number
  actualQuantity: number
}

interface WorkReport {
  id: number
  reportTime: string
  productName: string
  reportQuantity: number
  qualifiedQuantity: number
}

interface ApiResponse<T> {
  code: number
  msg: string
  data: T[]
}

// 响应式数据
const currentDateTime = ref('')
const loading = ref(false)
const error = ref('')

const stats = ref({
  workshops: 6,
  productionLines: 18,
  equipment: 50
})

const workOrders = ref<WorkOrder[]>([])
const employees = ref<WorkReport[]>([])

// ECharts图表引用
const qualityChartRef = ref(null)
const equipmentChartRef = ref(null)
const processChartRef = ref(null)
let qualityChart: echarts.ECharts | null = null
let equipmentChart: echarts.ECharts | null = null
let processChart: echarts.ECharts | null = null

// API基础地址
const API_BASE = MES_imesApi

const processes = ref([
  { name: '工序一', progress: 85 },
  { name: '工序二', progress: 30 },
  { name: '工序三', progress: 95 },
  { name: '工序四', progress: 100 },
  { name: '工序五', progress: 50 },
  { name: '工序六', progress: 60 }
])

const todayStats = ref({
  planned: 50,
  orders: 100,
  tasks: 80
})

// API调用函数
const fetchWorkOrders = async () => {
  try {
    loading.value = true
    error.value = ''
    console.log('开始获取工单数据，API地址:', API_BASE.defaults.baseURL + '/api/Customer/workorders')
    
    const response = await API_BASE.get('/api/Customer/workorders')
    console.log('工单API响应:', response)
    
    // 直接使用响应数据，不需要检查code
    if (response.data) {
      const data = Array.isArray(response.data) ? response.data : response.data.data || []
      workOrders.value = data
      console.log('工单数据设置完成，数量:', data.length)
    } else {
      workOrders.value = []
      console.log('工单响应数据为空')
    }
  } catch (err: any) {
    error.value = `获取工单数据失败: ${err.message || err}`
    console.error('获取工单数据错误:', err)
    console.error('错误详情:', err.response?.data || err.response || err)
    workOrders.value = []
  } finally {
    loading.value = false
  }
}

const fetchWorkReports = async () => {
  try {
    loading.value = true
    error.value = ''
    console.log('开始获取工单流程数据，API地址:', API_BASE.defaults.baseURL + '/api/Customer/workorderprocesses')
    
    const response = await API_BASE.get('/api/Customer/workorderprocesses')
    console.log('工单流程API响应:', response)
    
    // 直接使用响应数据，不需要检查code
    if (response.data) {
      const data = Array.isArray(response.data) ? response.data : response.data.data || []
      employees.value = data
      console.log('工单流程数据设置完成，数量:', data.length)
    } else {
      employees.value = []
      console.log('工单流程响应数据为空')
    }
  } catch (err: any) {
    error.value = `获取工单流程数据失败: ${err.message || err}`
    console.error('获取工单流程数据错误:', err)
    console.error('错误详情:', err.response?.data || err.response || err)
    employees.value = []
  } finally {
    loading.value = false
  }
}

// 格式化时间
const formatDateTime = (dateTimeStr: string) => {
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '.')
}

// 初始化ECharts图表
const initQualityChart = () => {
  if (!qualityChartRef.value) return
  
  qualityChart = echarts.init(qualityChartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '10%',
      right: '10%',
      top: '15%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: qualityLabels.value.slice(0, qualityData.value.length),
      axisLine: {
        lineStyle: {
          color: '#00d4ff'
        }
      },
      axisLabel: {
        color: '#00d4ff',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      interval: 20,
      axisLine: {
        lineStyle: {
          color: '#00d4ff'
        }
      },
      axisLabel: {
        color: '#00d4ff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.2)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: qualityData.value,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#00d4ff',
          width: 3
        },
        itemStyle: {
          color: '#00d4ff',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 212, 255, 0.8)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 255, 0.1)'
              }
            ]
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%',
          color: '#00d4ff',
          fontSize: 12,
          fontWeight: 'bold'
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00d4ff',
      textStyle: {
        color: '#ffffff'
      },
      formatter: function(params: any) {
        return `${params[0].name}: ${params[0].value}%`
      }
    }
  }
  
  qualityChart.setOption(option)
  
  // 响应式调整
  window.addEventListener('resize', () => {
    qualityChart?.resize()
  })
}

// 初始化工序排名图表
const initProcessChart = () => {
  if (!processChartRef.value) return
  
  processChart = echarts.init(processChartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '15%',
      right: '10%',
      top: '10%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 110,
      interval: 10,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#00d4ff',
          width: 2
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#00d4ff'
        }
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        fontWeight: 'bold'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.2)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: processes.value.map(p => p.name),
      axisLine: {
        show: true,
        lineStyle: {
          color: '#00d4ff',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    series: [
      {
        name: '工序进度',
        type: 'bar',
        data: processes.value.map(p => p.progress),
        barWidth: '60%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#00d4ff' },
            { offset: 0.5, color: '#0099cc' },
            { offset: 1, color: '#00ffff' }
          ]),
          borderRadius: [0, 8, 8, 0],
          shadowColor: 'rgba(0, 212, 255, 0.5)',
          shadowBlur: 10
        },
        label: {
          show: true,
          position: 'right',
          formatter: '{c}%',
          color: '#ffffff',
          fontSize: 12,
          fontWeight: 'bold'
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00d4ff',
      textStyle: {
        color: '#ffffff'
      },
      formatter: function(params: any) {
        return `${params[0].name}: ${params[0].value}%`
      }
    }
  }
  
  processChart.setOption(option)
}

// 初始化缺陷占比饼图
const initEquipmentChart = () => {
  if (!equipmentChartRef.value) return
  
  equipmentChart = echarts.init(equipmentChartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '50',
      subtext: '总数量',
      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: 28,
        fontWeight: 'bold',
        color: '#00d4ff'
      },
      subtextStyle: {
        fontSize: 12,
        color: '#ffffff'
      }
    },
    legend: {
      show: false
    },
    series: [
      {
        name: '缺陷占比',
        type: 'pie',
        radius: ['35%', '60%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {d}%',
          color: '#ffffff',
          fontSize: 11,
          fontWeight: 'bold'
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: '#00d4ff',
            width: 1
          }
        },
        data: defectRatio.value.items.map(item => ({
          value: item.percentage,
          name: item.name,
          itemStyle: {
            color: item.color,
            borderColor: '#1a237e',
            borderWidth: 3
          }
        }))
      }
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00d4ff',
      textStyle: {
        color: '#ffffff'
      },
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    }
  }
  
  equipmentChart.setOption(option)
  
  // 响应式调整
  window.addEventListener('resize', () => {
    equipmentChart?.resize()
  })
}

const equipmentRatio = ref({
  total: 50,
  items: [
    { name: '运行一', percentage: 10, color: '#00d4ff' },
    { name: '运行二', percentage: 15, color: '#4ecdc4' },
    { name: '运行三', percentage: 20, color: '#45b7d1' },
    { name: '故障设备', percentage: 10, color: '#ff6b6b' },
    { name: '待机设备', percentage: 15, color: '#0099cc' },
    { name: '维修设备', percentage: 30, color: '#006699' }
  ]
})

// 缺陷占比数据
const defectRatio = ref({
  total: 50,
  items: [
    { name: '缺陷一', percentage: 10, count: 10, color: '#ff6b6b' },
    { name: '缺陷二', percentage: 10, count: 10, color: '#ff9999' },
    { name: '缺陷三', percentage: 15, count: 15, color: '#4ecdc4' },
    { name: '缺陷四', percentage: 20, count: 20, color: '#45b7d1' },
    { name: '缺陷五', percentage: 20, count: 20, color: '#0099cc' },
    { name: '缺陷六', percentage: 30, count: 30, color: '#006699' }
  ]
})

// 右侧缺陷统计数据
const defectStats = ref([
  { name: '致命缺陷', count: 10, color: '#ff6b6b' },
  { name: '严重缺陷', count: 10, color: '#ff9999' },
  { name: '轻微缺陷', count: 15, color: '#4ecdc4' }
])

const qualityData = ref([82, 60, 70, 56, 65, 55, 75, 78, 52, 68, 50])
const qualityLabels = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const yAxisLabels = ref([0, 20, 40, 60, 80, 100])

// 计算属性
const qualityChartPoints = ref('')
const qualityAreaPoints = ref('')

// 更新时间
const updateDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 计算图表点位
const calculateChartPoints = () => {
  const width = 400
  const height = 200
  const padding = 20
  const chartWidth = width - padding * 2
  const chartHeight = height - padding * 2
  
  const points: string[] = []
  const areaPoints: string[] = []
  
  qualityData.value.forEach((value, index) => {
    const x = padding + (index / (qualityData.value.length - 1)) * chartWidth
    const y = padding + (1 - value / 100) * chartHeight
    points.push(`${x},${y}`)
    areaPoints.push(`${x},${y}`)
  })
  
  // 添加底部点用于填充区域
  areaPoints.push(`${padding + chartWidth},${height - padding}`)
  areaPoints.push(`${padding},${height - padding}`)
  
  qualityChartPoints.value = points.join(' ')
  qualityAreaPoints.value = areaPoints.join(' ')
}

let timeInterval: number

onMounted(async () => {
  updateDateTime()
  timeInterval = setInterval(updateDateTime, 1000)
  
  // 获取API数据
  await Promise.all([
    fetchWorkOrders(),
    fetchWorkReports()
  ])
  
  // 初始化ECharts图表
  await nextTick()
  initQualityChart()
  initEquipmentChart()
  initProcessChart()
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  if (qualityChart) {
    qualityChart.dispose()
  }
  if (equipmentChart) {
    equipmentChart.dispose()
  }
  if (processChart) {
    processChart.dispose()
  }
})
</script>

<style scoped>
.workshop-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1445 0%, #1a237e 50%, #0c1445 100%);
  background-size: 400% 400%;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  padding: 20px;
  overflow-x: auto;
  animation: backgroundShift 15s ease-in-out infinite alternate;
}

@keyframes backgroundShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
  animation: slideInDown 1s ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  background: linear-gradient(45deg, #00d4ff, #0099cc, #00ffff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
  }
  100% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8));
  }
}

.datetime {
  font-size: 18px;
  color: #00d4ff;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row {
  display: flex;
  gap: 20px;
  min-height: 300px;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.row-1 { height: 350px; animation-delay: 0.2s; }
.row-2 { height: 400px; animation-delay: 0.4s; }
.row-3 { height: 350px; animation-delay: 0.6s; }

/* 统计卡片 */
.stats-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 300px;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stats-cards:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 212, 255, 0.4);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 153, 204, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  transform: scale(1.02);
  background: rgba(0, 153, 204, 0.3);
  border-color: #00d4ff;
}

.stat-icon {
  font-size: 28px;
  width: 50px;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #00d4ff;
  min-width: 60px;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
  animation: numberGlow 2s ease-in-out infinite alternate;
}

@keyframes numberGlow {
  0% { text-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }
  100% { text-shadow: 0 0 25px rgba(0, 212, 255, 0.8); }
}

.stat-label {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
}

/* 表格样式 */
.work-order-table,
.employee-table {
  flex: 1;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.work-order-table:hover,
.employee-table:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 35px rgba(0, 212, 255, 0.4);
}

.table-header,
.section-header {
  margin-bottom: 15px;
  position: relative;
}

.table-header h3,
.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #00d4ff;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  position: relative;
}

.table-header h3::after,
.section-header h3::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th,
td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

th {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

td {
  color: #ffffff;
  font-size: 10px;
}

tbody tr {
  transition: all 0.3s ease;
}

tbody tr:hover {
  background: rgba(0, 212, 255, 0.15);
  transform: scale(1.01);
}

/* 工序进度 */
.process-progress {
  width: 300px;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.process-progress:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 212, 255, 0.4);
}

.progress-bars {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.progress-label {
  width: 60px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.progress-bar {
  flex: 1;
  height: 22px;
  background: rgba(0, 51, 102, 0.5);
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #0099cc, #00ffff);
  background-size: 200% 100%;
  border-radius: 11px;
  transition: width 1s ease-out;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
  animation: progressFlow 3s ease-in-out infinite;
  position: relative;
}

@keyframes progressFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-value {
  width: 45px;
  text-align: right;
  font-size: 12px;
  color: #00d4ff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

/* 今日统计 */
.today-stats {
  width: 350px;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.today-stats:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 212, 255, 0.4);
}

.hexagon-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.hexagon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounceIn 1s ease-out;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hexagon {
  width: 90px;
  height: 90px;
  background: linear-gradient(45deg, #00d4ff, #0099cc, #00ffff);
  background-size: 200% 200%;
  position: relative;
  margin: 20px 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
  transition: all 0.3s ease;
  animation: hexagonRotate 8s linear infinite;
}

@keyframes hexagonRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.hexagon:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 35px rgba(0, 212, 255, 0.7);
}

.hexagon-content {
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

.hex-label {
  font-size: 10px;
  margin-bottom: 5px;
  font-weight: 500;
}

.hex-value {
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 设备占比 */
.equipment-ratio {
  width: 650px;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
  transition: all 0.3s ease;
}

.equipment-ratio:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 212, 255, 0.4);
}

.pie-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pie-center {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    #00d4ff 0deg 36deg,
    #0099cc 36deg 90deg,
    #006699 90deg 162deg,
    #ff6b6b 162deg 198deg,
    #4ecdc4 198deg 252deg,
    #45b7d1 252deg 360deg
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
  transition: all 0.3s ease;
  animation: pieRotate 20s linear infinite;
}

@keyframes pieRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pie-center:hover {
  transform: scale(1.05);
  animation-play-state: paused;
}

.pie-center::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #0c1445, #1a237e);
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.3);
}

.pie-value {
  font-size: 28px;
  font-weight: bold;
  color: #00d4ff;
  z-index: 2;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}

.pie-label {
  font-size: 12px;
  color: #ffffff;
  z-index: 2;
  margin-top: 2px;
}

.pie-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.legend-item:hover {
  transform: translateX(5px);
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.legend-text {
  color: #ffffff;
  font-weight: 500;
}

/* 产品合格率 */
.quality-chart {
  flex: 1;
  background: rgba(0, 212, 255, 0.1);
  border: 2px solid #00d4ff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.quality-chart:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 212, 255, 0.4);
}

.echarts-container {
  width: 100%;
  height: 250px;
}

.quality-echarts,
.equipment-echarts,
.process-echarts {
  width: 100%;
  height: 100%;
}

/* 缺陷占比样式 */
.defect-chart-container {
  display: flex;
  align-items: center;
  height: 300px;
  gap: 15px;
  padding: 10px;
}

.defect-pie-chart {
  flex: 0 0 60%;
  height: 100%;
}

.defect-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 35%;
  height: 100%;
  justify-content: center;
}

.defect-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
  font-size: 12px;
}

.defect-stat-item:hover {
  background: rgba(0, 212, 255, 0.2);
  transform: translateX(3px);
}

.defect-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
  flex-shrink: 0;
}

.defect-name {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.line-chart {
  position: relative;
  height: 250px;
  padding: 10px;
}

.chart-svg {
  width: 100%;
  height: 200px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
}

.chart-svg polyline {
  animation: drawLine 2s ease-out;
}

@keyframes drawLine {
  0% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10px;
  color: #00d4ff;
  font-weight: 500;
}

.chart-labels span {
  transition: all 0.3s ease;
}

.chart-labels span:hover {
  color: #ffffff;
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .row {
    flex-direction: column;
  }
  
  .stats-cards,
  .process-progress,
  .today-stats,
  .equipment-ratio {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .title {
    font-size: 24px;
  }
  
  .datetime {
    font-size: 16px;
  }
  
  .hexagon-stats {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }
  
  .pie-legend {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .progress-item {
    flex-direction: column;
    gap: 8px;
  }
  
  .progress-bar {
    width: 100%;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #00d4ff, #0099cc);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #0099cc, #00d4ff);
}

/* 加载动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.workshop-dashboard * {
  animation-fill-mode: both;
}
</style>